<template>
	<uni-fab @fabClick="operateClick('add')" ref="fab" horizontal="right" :pattern="pattern" />
	<uni-popup ref="operatePopup" type="bottom" :mask-click="false">
		<view class="bottom-operate-dom">
			<view class="title">{{titleName}}</view>
			<view class="close-icon" @click="closeOperate">
				<uni-icons type="closeempty" size="20"></uni-icons>
			</view>
			<view class="flex-row">
				<view @click="operateClick('delete')" class="item-dom">
					<text class="iconfont icon-bg-delete item-icon delete"></text>
					<view class="delete">删除</view>
				</view>
				<view @click="operateClick('edit')" class="item-dom">
					<text class="iconfont icon-bianjiwenjian item-icon edit"></text>
					<view class="edit">编辑</view>
				</view>
				<view @click="operateClick('details')" class="item-dom">
					<text class="iconfont icon-table-xiangqing item-icon details"></text>
					<view class="details">详情</view>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script lang="ts" setup>
	import { ref } from 'vue'
	
	const emit = defineEmits(["operateClick"])
	const pattern = { color: '#7A7E83', backgroundColor: '#fff', selectedColor: '#01c2b7', buttonColor: '#01c2b7', iconColor: '#fff' }
	let operatePopup = ref(null)
	
	let titleName = ref(' ')
	
	// 打开 弹出层
	function openOperate(name) {
		titleName.value =  name || '操作'
		operatePopup.value.open()
	}
	// 关闭 弹出层
	function closeOperate() {
		operatePopup.value.close()
	}
	
	function operateClick(key) {
		if (key == 'delete') {
			uni.showModal({
				title: '操作提示',
				content: '是否确认删除：' + titleName.value,
				cancelText: '取消',
				cancelColor: '#dddddd',
				confirmText: '确定',
				confirmColor: '#01c2b7',
				success: (res) => {
					if (res.confirm) {
						emit('operateClick', key)
					} else if (res.cancel) {
						closeOperate()
					}
				},
			});
		} else{
			emit('operateClick', key)
		} 
	}
	defineExpose({
	  openOperate,
	  closeOperate
	})
</script>

<style lang="scss" scoped>

</style>